import React, { Component } from 'react'
import { List, Avatar, Badge, Button } from 'antd'
import { connect } from 'react-redux'
import { markReadedByIdAction, markReadedAllAction } from '../../actions/message'

const mapStateToProps = state => ({
  data: state.messages.toJS() // state.messages 的结构是 immutable 中的 List 结构，调用 toJS() 方法将 List 转换为 JavaScript 原生的数组结构
})
const mapDispatchToProps = {
  markReadedByIdAction: markReadedByIdAction,
  markReadedAllAction: markReadedAllAction
}

export default @connect(mapStateToProps, mapDispatchToProps) class Message extends Component {
  render() {
    return (
      <div>
        <Button type="danger" onClick={this.props.markReadedAllAction}>标记所有消息已读</Button>
        <List
          itemLayout="horizontal"
          dataSource={this.props.data}
          renderItem={item => (
            <List.Item
              actions={[
                item.readed
                ? null
                : <Button type="primary" onClick={() => this.props.markReadedByIdAction(item.id)}>标记为已读</Button>
              ]}
            >
              <List.Item.Meta
                avatar={<Badge dot={!item.readed}><Avatar src={item.avatar } /></Badge>}
                title={<a href="https://ant.design">{item.title}</a>}
                description={item.desc}
              />
            </List.Item>
          )}
        />
      </div>
    )
  }
}
